/**
 * @description  收益性表现（时点信息）
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Spin, Row, Col, Divider } from 'antd';
import { IconC } from '../../../components';
import colorArr from '../../../css/colors';
import style from './index.less';

class Info extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    const { args } = this.props;
    this.getData(args);
  }

  componentDidUpdate(prevProps) {
    const { args } = this.props;
    if (JSON.stringify(args) !== JSON.stringify(prevProps.args)) {
      this.getData(args);
    }
  }

  getData = (args) => {
    this.props.dispatch({
      type: 'yieldPerformanceM/getInfo',
      payload: args,
    });
  };

  showContent = () => {
    const {
      yieldPerformanceM: { infoData },
      args,
    } = this.props;
    const { debtAndProfit } = colorArr;
    const { text } = debtAndProfit;
    const { dailyRate } = infoData;
    const { pastRate } = infoData;
    const color1 = dailyRate.yield !== null ? (dailyRate.yield > 0 ? text[0] : text[1]) : null;
    const color2 = pastRate.yield !== null ? (pastRate.yield > 0 ? text[0] : text[1]) : null;
    const color3 = dailyRate.yieldFlag !== null ? (dailyRate.yieldFlag == 'up' ? text[0] : text[1]) : null;
    const color4 = pastRate.yieldFlag !== null ? (pastRate.yieldFlag == 'up' ? text[0] : text[1]) : null;
    return (
      <div>
        {dailyRate.yield && pastRate.yield ? (
          <Row>
            <Col span={10}>
              <span>日收益率（{`${dailyRate.endDate}`}）</span>&nbsp;<span style={{ color: `${color1}` }}>{`${dailyRate.yield}%`}</span> &nbsp;&nbsp;&nbsp;
              {dailyRate.yieldFlag ? (
                dailyRate.yieldFlag == 'up' ? (
                  <IconC type={'upArrowRed'} iconType={'original'} />
                ) : (
                  <IconC type={'downArrowGreen'} iconType={'original'} />
                )
              ) : null}
              {dailyRate.yieldDesc ? <span style={{ color: `${color3}` }}>{`（${dailyRate.yieldDesc}）`}</span> : null}
            </Col>
            <Col span={1}>
              <Divider type='vertical' style={{ height: '27px', marginBottom: '3px' }} />
            </Col>
            <Col span={10}>
              <span>成立以来收益率（{`截止${pastRate.endDate}`}）</span>&nbsp;<span style={{ color: `${color2}` }}>{`${pastRate.yield}%`}</span> &nbsp;&nbsp;&nbsp;
              {pastRate.yieldFlag ? (
                pastRate.yieldFlag == 'up' ? (
                  <IconC type={'upArrowRed'} iconType={'original'} />
                ) : (
                  <IconC type={'downArrowGreen'} iconType={'original'} />
                )
              ) : null}
              {pastRate.yieldDesc ? <span style={{ color: `${color4}` }}>{`（${pastRate.yieldDesc}）`}</span> : null}
            </Col>
          </Row>
        ) : null}
      </div>
    );
  };

  render() {
    const { loading, portfolioName } = this.props;
    return (
      <div className={style.info}>
        <Spin spinning={loading.effects['yieldPerformanceM/getInfo'] == true}>
          <div className={style.info1} style={{ marginTop: '10px' }}>
            {this.showContent()}
          </div>
        </Spin>
      </div>
    );
  }
}
export default connect(({ yieldPerformanceM, loading }) => ({
  yieldPerformanceM,
  loading,
}))(Info);
